手順1：C1ListBox コントロールを含むアプリケーションの作成

この手順では、Visual Studio で、ListBox for UWP を使用して UWP アプリケーションを作成します。

次の手順に従います。

Visual Studio で、［ファイル］→［新規作成］→［プロジェクト］を選択します。
［新しいプロジェクト］ダイアログボックスで、左ペインの言語を展開し、言語の下で［Windows ストア］を選択し、テンプレートリストで［新しいアプリケーション (XAML)］を選択します。名前を入力し、［OK］をクリックしてプロジェクトを作成します。
ソリューションエクスプローラでプロジェクト名を右クリックし、［参照の追加］を選択します。
［参照マネージャ］ダイアログボックスで［ComponentOne for UWP］を選択します。［OK］をクリックしてダイアログボックスを閉じ、参照を追加します。

MainPage.xaml をまだ開いていない場合は開き、<Page> タグ内に次のマークアップを追加します。

	コードのコピー
xmlns:c1="using:C1.Xaml" xmlns:c1tile="using:C1.Xaml.Tile"

これにより、C1.Xaml および C1.Xaml.Tile アセンブリへの参照がプロジェクトに追加されます。

<Grid> タグと </Grid> タグの間にカーソルを置き、１回クリックします。

<Grid> タグと </Grid> タグの間に次の <StackPanel> マークアップを追加して、TextBlock と ProgressBar を含む StackPanel を追加します。

	コードのコピー
<StackPanel x:Name="loading" VerticalAlignment="Center"> <TextBlock Text="Retrieving data from Flickr..." TextAlignment="Center"/> <ProgressBar IsIndeterminate="True" Width="200" Height="4"/> </StackPanel>

この TextBlock と ProgressBar は、C1ListBox が読み込み中であることを示します。

ツールボックスに移動し、C1ListBox アイコンをダブルクリックして、コントロールをグリッドに追加します。これで、参照と XAML 名前空間が自動的に追加されます。

<Xaml:C1ListBox> タグを編集して、コントロールをカスタマイズします。

	コードのコピー
<c1:C1ListBox x:Name="listBox" ItemsSource="{Binding}" Background="Transparent" Visibility="Collapsed" ItemWidth="800" ItemHeight="600" RefreshWhileScrolling="False"></c1:C1ListBox>

これは、コントロールに名前を付け、コントロールの連結、背景、表示/非表示、サイズ、および更新機能をカスタマイズします。

<Xaml:C1ListBox> タグと </Xaml:C1ListBox> タグの間に次のマークアップを追加します。

	コードのコピー
`<c1:C1ListBox.PreviewItemTemplate> <DataTemplate> <Grid Background="Gray"> <Image Source="{Binding Thumbnail}" Stretch="UniformToFill" /> </Grid> </DataTemplate> </c1:C1ListBox.PreviewItemTemplate> <c1:C1ListBox.ItemTemplate> <DataTemplate> <Grid> <Image Source="{Binding Content}" Stretch="UniformToFill" /> <TextBlock Text="{Binding Title}" Foreground="White" Margin="4 0 0 4" VerticalAlignment="Bottom" /> </Grid> </DataTemplate> </c1:C1ListBox.ItemTemplate>`

コードのコピー

<c1:C1ListBox.PreviewItemTemplate>
  <DataTemplate>
    <Grid Background="Gray">
      <Image Source="{Binding Thumbnail}" Stretch="UniformToFill" />
    </Grid>
  </DataTemplate>
</c1:C1ListBox.PreviewItemTemplate>
<c1:C1ListBox.ItemTemplate>
  <DataTemplate>
    <Grid>
      <Image Source="{Binding Content}" Stretch="UniformToFill" />
      <TextBlock Text="{Binding Title}" Foreground="White" Margin="4 0 0 4" VerticalAlignment="Bottom" />
    </Grid>
  </DataTemplate>
</c1:C1ListBox.ItemTemplate>

このマークアップは、C1ListBox コントロールのコンテンツのデータテンプレートを追加します。このコントロールの連結はコードで行います。

ここまでの成果

これで、C1ListBox コントロールを含む UWP スタイルのアプリケーションを作成できました。次の「手順2：ListBox へのデータの追加」では、C1ListBox にデータを追加します。